<!-- eslint-disable vue/max-attributes-per-line -->
<template>
  <div class="list">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      style="padding-top: 20px"
      title="商品列表"
      left-arrow
      fixed
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <van-icon name="arrow-left" color="black" size="30" />
      </template>
      <template #right>
        <van-icon
          v-if="num === 1"
          @click="num = 2"
          name="bars"
          color="black"
          size="30"
        />
        <van-icon
          v-if="num === 2"
          @click="num = 3"
          name="apps-o"
          color="black"
          size="30"
        />
        <van-icon
          v-if="num === 3"
          @click="num = 1"
          name="qr"
          color="black"
          size="30"
        />
      </template>
    </van-nav-bar>
    <!-- 下拉表单 -->

    <van-row class="second">
      <van-col span="8" v-if="check === 1">
        <van-dropdown-menu duration="0.3" class="dropdown">
          <van-dropdown-item
            @change="handelbrand"
            class="dropdown"
            v-model="value1"
            :options="option1"
          />
        </van-dropdown-menu>
      </van-col>
      <van-col v-else span="8" class="tit">
        <span
          style="font-size: 18px"
          :style="check === 0 ? 'color:#d81e06' : ''"
          @click="handelcheck"
        >
          默认
        </span>
      </van-col>
      <van-col span="8" class="tit">
        <span
          style="font-size: 18px"
          :style="check == 2 ? 'color:#d81e06' : ''"
          @click="handelHave"
        >
          有货优先
        </span>
      </van-col>
      <van-col span="8" class="tit">
        <span
          style="font-size: 18px"
          :style="check == 3 ? 'color:#d81e06' : ''"
          @click="handelDirect"
        >
          直营优先
        </span>
      </van-col>
    </van-row>

    <!-- 商品列表区域 -->
    <!-- 样式 1 -->
    <ul v-if="num === 1" class="father">
      <li
        @click="handelRoute(item)"
        v-for="item in GoodsList"
        :key="item.id"
        class="son"
      >
        <img :src="item.img" class="goodsImg" />
        <div class="tittle">
          <p class="top">
            <span
              v-if="item.isDirect"
              class="tag"
              style="color: #fff; background: #d81e06"
              >直营</span
            >
            <span
              v-if="!item.isHave"
              class="tag"
              style="color: #fff; background: #909090"
              >缺货</span
            >
            {{ item.name }}
          </p>
          <p class="bottom">
            <span style="color: #d81e06">￥{{ item.price }}</span>
            <span style="color: #99999c">销量：{{ item.volume }}</span>
          </p>
        </div>
      </li>
    </ul>
    <!-- 样式2 -->
    <ul v-if="num === 2" class="cloum">
      <li @click="handelRoute(item)" v-for="item in GoodsList" :key="item.id">
        <img :src="item.img" />
        <div class="tittle">
          <p class="top">
            <span
              v-if="item.isDirect"
              class="tag"
              style="color: #fff; background: #d81e06"
              >直营</span
            >
            <span
              v-if="!item.isHave"
              class="tag"
              style="color: #fff; background: #909090"
              >缺货</span
            >
            {{ item.name }}
          </p>
          <p class="tailuo">
            <span style="color: #d81e06">￥{{ item.price }}</span>
            <span style="color: #99999c" class="little"
              >销量：{{ item.volume }}</span
            >
          </p>
        </div>
      </li>
    </ul>
    <!-- 样式3 -->
    <div v-if="num === 3" class="commodity">
      <waterfall :col="col" :data="GoodsList" :gutter-width="0">
        <template>
          <div
            class="commodity-item"
            v-for="(item, index) in GoodsList"
            :key="index"
            :class="{ active: index % 2 ? 1 : 0 }"
            @click="handleList(item)"
          >
            <van-image :src="item.img" :height="suijiHeight()" />
            <div class="commodity-item-item">
              <p class="p3">
                <span class="zy" v-show="item.isDirect">直营</span>
                <span class="qh" v-show="!item.isHave">缺货</span
                >{{ item.name }}
              </p>
              <div class="data">
                <p class="p1">￥{{ item.price }}</p>
                <p class="p2">销量：{{ item.volume }}</p>
              </div>
            </div>
          </div>
        </template>
      </waterfall>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getGoodsListAPI } from '@/api/home'
import './list.css'

export default {
  name: 'ListView',
  data() {
    return {
      check: 0,
      col: 2,
      num: 1,
      GoodsList: [],
      value1: 0,
      option1: [
        { text: '默认', value: 0 },
        { text: '价格由高到低', value: 1 },
        { text: '销量由高到低', value: 2 }
      ]
    }
  },
  activated() {
    // this.getGoodsList()
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    // 下拉表单数据发生变化时
    handelbrand(value) {
      // console.log(value, 1)
      // console.log(this.value1)
      if (value === 1) {
        this.GoodsList.sort((a, b) => {
          return b.price - a.price
        })
      } else if (value === 2) {
        this.GoodsList.sort((a, b) => {
          return a.price - b.price
        })
      } else {
        this.getGoodsList()
      }
    },
    handelcheck() {
      this.check = 1
      this.value1 = 0
      this.getGoodsList()
    },
    // 跳转至详情页
    handleList(item) {
      if (item.isHave) {
        this.$router.push({ name: 'info', params: item })
      } else {
        Toast('缺少库存')
      }
    },
    // 给图片一个区间的随机高度
    suijiHeight() {
      const a = Math.random() * (208 - 140) + 140
      return a
    },
    // 直营优先
    async handelDirect() {
      this.check = 3
      await this.getGoodsList()
      const direct = this.GoodsList.filter((item) => item.isDirect)
      const undirect = this.GoodsList.filter((item) => !item.isDirect)
      this.GoodsList = [...direct, ...undirect]
    },
    // 有货优先
    async handelHave() {
      this.check = 2
      await this.getGoodsList()
      const have = this.GoodsList.filter((item) => item.isHave)
      const unhave = this.GoodsList.filter((item) => !item.isHave)
      this.GoodsList = [...have, ...unhave]
    },
    // 点击跳转到详情页
    handelRoute(e) {
      if (!e.isHave) {
        this.$toast.fail('该商品暂时缺货')
        return
      }
      this.$router.push({ name: 'info', params: e })
    },
    // 获取商品列表
    async getGoodsList() {
      const { data } = await getGoodsListAPI()
      // console.log(data)
      this.GoodsList = data.data.list
      // console.log(this.GoodsList)
    },
    onClickLeft() {
      this.$router.back()
      Toast('返回')
    },
    onClickRight() {
      Toast(this.num)
    }
  }
}
</script>

<style lang="less" scoped>
ul,
li {
  list-style: none;
}
.list {
  background-color: #eee;
}
.father {
  background-color: #fff;
}
.father,
.cloum {
  margin-top: 230px;
}
.second {
  width: 100%;
  background-color: #fff;
  position: fixed;
  top: 130px;
  z-index: 3;
  overflow: hidden;
}
.commodity {
  position: relative;
  margin: 0.21333rem;
  margin-top: 230px;
  max-width: 100%;
  background-color: #eee;
  .commodity-item {
    border-radius: 0.16rem;
    background-color: #fff;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    margin-left: 0.15rem;
    margin-right: 0.15rem;
    padding: 0.21333rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    .commodity-item-item {
      width: 100%;
      .p3 {
        font-size: 0.37333rem;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        line-height: 0.48rem;
        .zy {
          padding: 0 0.10667rem;
          font-size: 0.32rem;
          color: #fff;
          background-color: #d81e06;
          border-radius: 0.05333rem;
          margin-right: 0.05333rem;
        }
        .qh {
          padding: 0 0.10667rem;
          font-size: 0.32rem;
          color: #fff;
          background-color: #909090;
          border-radius: 0.05333rem;
          margin-right: 0.05333rem;
        }
      }
    }
    img {
      width: 100%;
    }
    .data {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 0.21333rem;
      .p1 {
        font-size: 0.42667rem;
        color: #d81e06;
        font-weight: 500;
        margin: 0;
      }
      .p2 {
        font-size: 0.37333rem;
        color: #999;
        margin: 0;
      }
    }
  }
}
.dropdown {
  margin-top: 5px;
  box-shadow: 0;
  border: 0;
}
.tit {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 99px;
  position: relative;
  span {
    position: absolute;
    top: 505;
    background-color: #ffffff;
  }
}
.tag {
  font-size: 14px;
  padding: 5px;
  padding: 5px 8px;
  margin-right: 5px;
  border-radius: 5px;
}
.son {
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  padding: 10px;
  .tittle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    p {
      padding: 0;
      margin: 0;
    }
    .bottom {
      margin-top: 50px;
      font-size: 0.5rem;
      display: flex;
      justify-content: space-between;
    }
  }

  .top {
    font-size: 32px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
.goodsImg {
  width: 235px;
  // height: 235px;
}
</style>
